<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <div>
          <div>
            <el-input
              v-model="keyword"
              placeholder="输入名称检索"
              clearable
              style="width: 300px"
            />
            <el-button type="primary" style="margin-left: 10px" @click="search"
              ><el-icon><Search /></el-icon>&nbsp;搜索</el-button
            >
            <el-button plain @click="keyword = ''">
              <el-icon><Refresh /></el-icon>重置</el-button
            >
          </div>
          <div class="header-btn">
            <el-button type="primary" @click="addCategory" plain
              ><el-icon><Plus /></el-icon>&nbsp;新增</el-button
            >
            <el-button type="info" @click="isExpand" plain
              ><el-icon><Plus /></el-icon>&nbsp;展开/折叠</el-button
            >
          </div>
        </div>
      </div>
    </template>
    <!-- 分类列表 -->
    <categoryTable
      ref="categoryList"
      :tableData="filterTableData"
    ></categoryTable>
    <categoryDialog ref="dialog"></categoryDialog>
  </el-card>
</template>

<script lang="ts" setup>
// 商品分类
// 引入商品分类表组件
import { computed, ref, reactive } from "vue";
import categoryTable from "./categoryTable.vue";
import categoryDialog from "./CategoryDialog.vue";

import { ElMessage } from "element-plus";
import { useStore } from "vuex";
const store = useStore();
let categoryList = ref();
let dialog = ref(); //存放弹窗组件ref
let keyword = ref("");
let tableData = ref([]);

const getData = () => {
  store.dispatch("category/getCategory");
  tableData = computed(() => store.getters["category/categoryList"]);
};
getData();

// 搜索
const search = () => {
  if (!keyword.value.trim()) return;
};
const filterTableData = computed(() =>
  tableData.value?.filter(
    (data) =>
      !keyword.value.trim() ||
      data.skuCategoryName.includes(keyword.value.trim())
  )
);

const isExpand = () => {
  // 触发子组件方法
  categoryList.value.isExpand();
};

// 添加
const addCategory = () => {
  dialog.value.openDialog("添加分类");
};
</script>

<style scoped lang="less">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-btn {
  margin-top: 20px;
}
</style>
